<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib//bootstrap-4.3.1//dist/css/bootstrap.css"></link>
	</head>

	<body>
		<script src="./lib/vue-2.6.10/dist/vue.min.js"></script>
		<div id="app">
      <input type="button" ref="mybtn" value="获取元素" @click="getElement">
      <h3 id="myh3" ref="myh3">哈哈哈哈， 今天天气太好了!!!</h3>
      <hr>
      <login ref="mylogin"></login>

    </div>
		<script>
      var login = {
        template: '<h1>登陆组件</h1>',
        data(){
          return{
            msg: 'son msg'
          }
        },
        methods: {
          show(){
            console.log('调用了子组件方法')
          }
        }
      }
      var vm = new Vue({
        el: '#app',
        data: {},
        methods:{
          getElement(){
            // console.log(this.$refs.myh3.innerText)
            this.$refs.mylogin.show()
          }
        },
        components:{
          login
        }
      })
		</script>
	</body>
</html>
